<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>品牌列表案例私有自定义指令</title>
    <script src="./lib/vue.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>

    <div id="app">
        <!-- 标题 头部 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">产品列表</h3>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">编号</label>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入编号" v-model="id">
                    </div>

                    <div class="form-group">
                        <label for="exampleInputName2">名字</label>
                        <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入名字"
                            v-model="name" @keyup.start2='add'>

                    </div>
                    <input type="button" class="btn btn-primary" value="添加" @click="add('参数')">


                    <div class="form-group">
                        <label for="exampleInputName2">搜索名称关键字</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="请输入搜索名字"
                            v-model="keywords" v-focus>
                    </div>
                </form>
            </div>
        </div>
        <!-- 表格 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th v-bgc>编号</th>
                    <th v-bgc>名称</th>
                    <th>创建时间</th>
                    <th>更多操作</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td v-text="item.name"></td>
                    <td>{{ item.ctime | dateFormat('YYYY-MM-DD') }}</td>
                    <td>
                        <a href="#" @click="delBtn( item.id )">删除</a>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>

    <div id="app2">
        <h3 v-color id="testH3">{{ dt | dateFormat }}</h3>
    </div>
    <script>

        Vue.directive('color', {
            bind: function (el) { // 第一个 回调函数 表示：指令所在的 HTML元素对象 在内存中创建的时候 调用
                el.style.color = 'red'
            },
            inserted: function (el) { // 第二个 回调函数 表示：指令所在的 HTML元素对象 插入到HTML节点里面 （只会调用一次）
            },
            update: function (el) { // 第三个 回调函数 表示：指令所在的 HTML元素对象中的数据出现更新的时候 调用， 会被调用多次
            }
        })

        Vue.directive('focus', {
            bind: function (el) {
                // bind 是 指令 所在的 元素对象 还在 内存中没有 渲染到界面， 所以绑定的事件不能生效
                // el.focus()
            },
            inserted: function (el) {
                // inserted 元素 插入到 HTML 节点中 已经被渲染出来了， 所以可以响应事件
                el.focus()
            }
        })
        Vue.config.keyCodes.start2 = 113;

        Vue.filter('dateFormat', function (v, par = '') { // 形参可以 自己命名
            // console.log(v);
            console.log(par);

            // 创建时间对象
            const dt = new Date(v)
            // 获取年月日
            const yy = dt.getFullYear()
            const MM = dt.getMonth() + 1 // 月份 从 0 月开始
            const DD = dt.getDate()

            const H = dt.getHours()
            const m = dt.getMinutes()
            const s = dt.getSeconds()
            let strDate = `${yy}-${MM}-${DD} ${H}:${m}:${s}`

            // 判断返回格式 
            if (par.toLowerCase() == 'yyyy-mm-dd') {
                strDate = `${yy}-${MM}-${DD}`
                return strDate
            } else {
                // console.log(strDate);
                return strDate
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '宝马', ctime: new Date() },
                    { id: 2, name: '奔驰', ctime: new Date() },
                ]
            },
            methods: {
                add() {

                    this.list.push(
                        { id: this.id, name: this.name, ctime: new Date() }
                    )
                    this.id = this.name = ''
                },
                delBtn(id) {
                    // findIndex 获取数组中对应元素的索引
                    const index = this.list.findIndex(item => {
                        if (item.id == id) {
                            // 满足条件返回当前 元素的索引 结束遍历
                            return true
                        }
                    })
                    this.list.splice(index, 1)

                },
                // 根据 关键词 筛选 list 数组中的数据
                search(keywoerd) {
                    // 创建新数组
                    let newList = []
                    // 遍历list
                    this.list.forEach(item => {
                        // 在 list 元素的 name属性中查找是否 包含 搜索的词组 如果包含就不等于 负一
                        if (item.name.indexOf(keywoerd) != -1) {
                            // 将 搜索出来的 元素添加到新数组中
                            newList.push(item)
                        }
                    })
                    // 返回 搜索出的新数组
                    return newList
                }

            },

            /*
            作业：

            设置 私有指令
                自定义 一个 设置 背景颜色的 指令 在使用时 是 v-bgc
                品牌列表案例私有自定义指令
            */
            directives: {
                bgc: function (el) {
                    el.style.backgroundColor = 'pink';
                }
            }
        })

        const vm2 = new Vue({
            el: '#app2',
            data: {
                dt: new Date()
            }
        })





    </script>


</body>

</html>